<template>
	<view class="">
		<uni-nav-bar @clickLeft="$tab.back()" fixed="true" left-icon="left" backgroundColor="#fff"
			:title="title" statusBar="true" :border="false" />
		<view class="px-32 text-28">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="name" borderBottom labelWidth="80">
					<u--input v-model="form.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="电话" prop="mobile" borderBottom labelWidth="80">
					<u--input v-model="form.mobile" border="none" placeholder="请输入电话"></u--input>
				</u-form-item>
				<u-form-item label="收货地址" prop="area" borderBottom labelWidth="80">
					<view class="w-full flex items-center justify-between" @click="regionVisible = true">
						<text class="u-line-2" style="flex: 3;"
							:style="{color:`${form.area =='请选择收货地址'?'#999' :'#333 ' }`}">{{form.area}}</text>
						<image class="image-40" :src="form.area == '请选择收货地址' ? icon_dingweidizhi :icon_dingwei "
							mode="widthFix">
						</image>
					</view>
				</u-form-item>
				<u-form-item prop="detail">
					<view class="mt-16 w-full">
						<u--textarea confirmType="done" v-model="form.detail"
							placeholder="如街道,门牌号,小区,乡村,乡镇,村等"></u--textarea>
					</view>
				</u-form-item>
				<u-form-item label="是否默认" borderBottom labelWidth="80">
					<view class="flex justify-between items-center w-full">
						<view class="" style="color: #fff;">
							1
						</view>
						<u-switch v-model="form.isDefault" activeColor="#FA554E"></u-switch>
					</view>
				</u-form-item>
			</u--form>
		</view>

		<bottom-btn :txt="`${title == '新增地址'? '确认新增':'确认修改'}`" @click="submit"></bottom-btn>

		<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value"
			:hide-area="false" @confirm="onConfirm($event,'region')" @cancel="onCancel" ref="region"></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker'
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				regionVisible: false,
				defaultRegion: ["1", "1", "1"],
				icon_dingweidizhi: 'https://file.fulewanjia.com/fulewanjia/profile/preImages/image/icon_dingweidizhi.png',
				icon_dingwei: 'https://file.fulewanjia.com/fulewanjia/profile/preImages/image/icon_dingwei.png',
				title: '新增地址',
				form: {
					name: '', //收货人名称
					mobile: '', //电话
					isDefault: true, //是否默认
					area: '请选择收货地址', // 收获地址
					detail: '', //详细地址
					lat: '', //经度
					lnt: '', //纬度
					id: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写收货人姓名',
						trigger: ['blur', 'change']
					},
					detail: {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
					area: {
						type: 'string',
						required: true,
						message: '请选择地址',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		onLoad(e) {
			if (e && e.a) {
				const obj = JSON.parse(decodeURIComponent(e.a))
				this.$set(this.form, 'name', obj.name)
				this.$set(this.form, 'mobile', obj.mobile)
				this.$set(this.form, 'area', obj.area)
				this.$set(this.form, 'detail', obj.detail)
				this.$set(this.form, 'id', obj.id)
				this.$set(this.form, 'lat', obj.lat)
				this.$set(this.form, 'lnt', obj.lnt)
				this.$set(this.form, 'isDefault', (obj.isDefault == 1 ? true : false))
				this.title = '修改地址'
			}
		},
		onReady() {
			// 设置表单校验规则 否则表单校验无效
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			onConfirm(res) {
				this.$set(this.form, 'area', res.result)
			},
			//提交
			submit() {
				if (this.form.area == "请选择收货地址" && !this.form.address) {
					uni.showToast({
						title: '请选择收货地址/输入详细地址',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				
				if (this.form.area == "请选择收货地址") {
					this.form.area = this.form.address
				}
				
				this.$refs.uForm.validate().then(res => {
					if (this.form.isDefault == true) {
						this.form.isDefault = 1
					} else {
						this.form.isDefault = 0
					}
					if (this.form.id) {
						this.$Api.user.addressModify({
							...this.form
						}).then((res) => {
							if (res.code == 200) {
								uni.$u.toast(res.msg)
								setTimeout(() => {
									this.$tab.back()
								}, 1000)
							} else {
								uni.$u.toast(res.msg)
							}

						})
					} else {
						this.$Api.user.addAddress({
							...this.form
						}).then((res) => {
							uni.$u.toast(res.msg)
							setTimeout(() => {
								this.$tab.back()
							}, 1000)
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .uni-input-wrapper {
		padding-left: 10rpx !important;
	}

	/deep/ .u-form-item__body__left__content__label {
		width: 120rpx;
	}
</style>